{% extends 'base.html' %}

{% block title %}Корзина - МОЙ НЕ САМ{% endblock %}

{% block content %}
<h1 class="mb-4">Корзина</h1>

{% if cart_items %}
<div class="card mb-4">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0">Товары в корзине</h5>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th scope="col" style="width: 100px;">Фото</th>
                        <th scope="col">Товар</th>
                        <th scope="col" style="width: 150px;">Цена</th>
                        <th scope="col" style="width: 150px;">Количество</th>
                        <th scope="col" style="width: 150px;">Сумма</th>
                        <th scope="col" style="width: 80px;">Действия</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in cart_items %}
                    <tr>
                        <td>
                            {% if item.product.image %}
                            <img src="{{ item.product.image.url }}" alt="{{ item.product.name }}" class="img-thumbnail" style="max-width: 80px; max-height: 80px;">
                            {% else %}
                            <div class="bg-light text-center" style="width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;">
                                <span class="text-muted small">Нет фото</span>
                            </div>
                            {% endif %}
                        </td>
                        <td>
                            <a href="{% url 'product_detail' item.product.id %}" class="text-decoration-none">
                                <h6 class="mb-1">{{ item.product.name }}</h6>
                            </a>
                            {% if item.product.category %}
                            <span class="text-muted small">{{ item.product.category.name }}</span>
                            {% endif %}
                        </td>
                        <td>{{ item.product.price }} ₽</td>
                        <td>
                            <form action="{% url 'update_cart_item' item.id %}" method="post" class="d-flex">
                                {% csrf_token %}
                                <input type="number" name="quantity" value="{{ item.quantity }}" min="1" max="99" class="form-control form-control-sm" style="width: 70px;">
                                <button type="submit" class="btn btn-sm btn-outline-primary ms-2">
                                    Обновить
                                </button>
                            </form>
                        </td>
                        <td class="fw-bold">{{ item.get_total }} ₽</td>
                        <td>
                            <a href="{% url 'remove_from_cart' item.id %}" class="btn btn-sm btn-outline-danger">
                                Удалить
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot class="table-light">
                    <tr>
                        <td colspan="4" class="text-end fw-bold">Итого:</td>
                        <td class="fw-bold">{{ total_amount }} ₽</td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <div class="card-footer">
        <div class="d-flex justify-content-between">
            <a href="{% url 'catalog' %}" class="btn btn-outline-primary">
                Продолжить покупки
            </a>
            <a href="{% url 'checkout' %}" class="btn btn-success">
                Оформить заказ
            </a>
        </div>
    </div>
</div>
{% else %}
<div class="alert alert-info">
    <p class="mb-0">Ваша корзина пуста. <a href="{% url 'catalog' %}" class="alert-link">Перейти в каталог</a>.</p>
</div>
{% endif %}
{% endblock %}